<script setup lang="ts">
import { uploadFileAPI } from '@/apis/uploadFile'
import { useBeforeOrderStore } from '@/store/beforeOrder'
import { useUserInfoStore } from '@/store/userInfo'
import { OrderType } from '@/types/enum'

const router = useRouter()
const userInfoStore = useUserInfoStore()
const beforeOrderStore = useBeforeOrderStore()

/**
 * @description 跳转至选择位置页面
 * @param type 选择上车点还是下车点的位置
 */
function handleChooseLocation(type: '上车点' | '下车点') {
  router.push({
    name: 'chooseLocation',
    params: {
      type,
      navigationDestination: 'back',
      initialValue: type === '上车点'
        ? beforeOrderStore.from?.name || ''
        : beforeOrderStore.to?.name || '',
    },
  })
}

/* ------------------------------- 选择照片 START ------------------------------- */
/**
 * @description 处理选择照片事件
 */
function handlePickImage() {
  uni.chooseFile({
    type: 'image',
    complete: (result) => {
      (result.tempFiles as File[]).forEach(async (file) => {
        const res = await uploadFileAPI({
          tempFilePath: (file as any).path,
          fileType: 'image',
        }, userInfoStore.userInfo!.token!)
        if (res.data) {
          const resData = JSON.parse(res.data)
          beforeOrderStore.images.push(resData.data.fullurl)
        }
      })
    },
  })
}

/**
 * @description 处理删除照片事件
 */
function handleDeleteImage(picture: string) {
  beforeOrderStore.images = beforeOrderStore.images
    .filter(item => item !== picture)
}
/* -------------------------------- 选择照片 END -------------------------------- */

const handleSubmit = useThrottleFn(() => {
  if (
    !beforeOrderStore.passengerMobile
    || !beforeOrderStore.pronounMobile
    || !beforeOrderStore.from
    || !beforeOrderStore.to
    || !beforeOrderStore.goodsType
  ) {
    uni.showToast({ title: '请先填选所有必填选项目', icon: 'none' })
    return
  }
  router.push({
    name: 'call',
    params: { order_type: OrderType.捎件.toString() },
  })
}, 1000)
</script>

<template>
  <view class="fixed left-0 top-0 z-0 h-screen w-screen from-#E6F0FF to-#F8F8F8 bg-gradient-to-b" />
  <Spacer height="24" />
  <view class="relative z-10 px-24rpx">
    <view class="rounded-20rpx bg-white px-30rpx py-40rpx">
      <view class="text-34rpx text-#333333 font-bold leading-34rpx">
        捎件信息
      </view>
      <Spacer height="30" />
      <input
        v-model="beforeOrderStore.passengerMobile"
        type="text"
        class="h-98rpx rounded-20rpx bg-#F3F3F3 px-30rpx text-34rpx text-#333333 font-bold leading-34rpx"
        placeholder="请输入收件人手机号码"
        placeholder-class="text-34rpx leading-34rpx text-#333333 font-bold"
      >
      <Spacer height="33" />
      <input
        v-model="beforeOrderStore.passengerName"
        type="text"
        class="px-30rpx text-28rpx text-#333333 font-medium leading-28rpx"
        placeholder="请输入收件人姓名（选填）"
        placeholder-class="text-28rpx leading-28rpx text-#999999 font-bold"
      >
      <Spacer height="33" />
      <view
        class="h-98rpx w-full flex items-center rounded-20rpx bg-#F3F3F3 px-18rpx"
        @tap="handleChooseLocation('上车点')"
      >
        <view class="mr-15rpx h-12rpx w-12rpx rounded-full bg-#3F8BF6" />
        <view class="text-34rpx text-#333333 font-bold leading-30rpx">
          {{ beforeOrderStore.from ? beforeOrderStore.from.name : '请选择捎件起点位置' }}
        </view>
      </view>
      <Spacer height="33" />
      <view
        class="h-98rpx w-full flex items-center rounded-20rpx bg-#F3F3F3 px-18rpx"
        @tap="handleChooseLocation('下车点')"
      >
        <view class="mr-15rpx h-12rpx w-12rpx rounded-full bg-#FA662F" />
        <view class="text-34rpx text-#333333 font-bold leading-34rpx">
          {{ beforeOrderStore.to ? beforeOrderStore.to.name : '请选择捎件终点位置' }}
        </view>
      </view>
      <Spacer height="33" />
      <input
        v-model="beforeOrderStore.pronounMobile"
        type="text"
        class="h-98rpx rounded-20rpx bg-#F3F3F3 px-30rpx text-34rpx text-#333333 font-bold leading-34rpx"
        placeholder="请输入发件人手机号码"
        placeholder-class="text-34rpx leading-34rpx text-#333333 font-bold"
      >
      <Spacer height="33" />
      <input
        v-model="beforeOrderStore.pronounName"
        type="text"
        class="px-30rpx text-28rpx text-#333333 font-medium leading-28rpx"
        placeholder="请输入发件人姓名（选填）"
        placeholder-class="text-28rpx leading-28rpx text-#999999 font-bold"
      >
    </view>
    <Spacer height="30" />
    <view class="rounded-20rpx bg-white">
      <ListCellColumn label="物品类型">
        <view class="grid grid-cols-3 grid-rows-2 gap-32rpx">
          <RGButton
            :type="beforeOrderStore.goodsType === '食品饮料' ? 'primary' : 'secondary'"
            size="medium"
            corner="full"
            @tap="beforeOrderStore.goodsType = '食品饮料'"
          >
            食品饮料
          </RGButton>
          <RGButton
            :type="beforeOrderStore.goodsType === '鲜花' ? 'primary' : 'secondary'"
            size="medium"
            corner="full"
            @tap="beforeOrderStore.goodsType = '鲜花'"
          >
            鲜花
          </RGButton>
          <RGButton
            :type="beforeOrderStore.goodsType === '蛋糕' ? 'primary' : 'secondary'"
            size="medium"
            corner="full"
            @tap="beforeOrderStore.goodsType = '蛋糕'"
          >
            蛋糕
          </RGButton>
          <RGButton
            :type="beforeOrderStore.goodsType === '家居家纺' ? 'primary' : 'secondary'"
            size="medium"
            corner="full"
            @tap="beforeOrderStore.goodsType = '家居家纺'"
          >
            家居家纺
          </RGButton>
          <RGButton
            :type="beforeOrderStore.goodsType === '服饰鞋帽' ? 'primary' : 'secondary'"
            size="medium"
            corner="full"
            @tap="beforeOrderStore.goodsType = '服饰鞋帽'"
          >
            服饰鞋帽
          </RGButton>
          <RGButton
            :type="beforeOrderStore.goodsType === '文件证照' ? 'primary' : 'secondary'"
            size="medium"
            corner="full"
            @tap="beforeOrderStore.goodsType = '文件证照'"
          >
            文件证照
          </RGButton>
        </view>
      </ListCellColumn>
      <Divider width="642" />
      <ListCellColumn label="上传图片">
        <PictureGrid
          :pictures="beforeOrderStore.images"
          mode="edit"
          :width="642"
          :cols="4"
          @pick-image="handlePickImage"
          @delete="handleDeleteImage"
        />
      </ListCellColumn>
      <Divider width="642" />
      <ListCellColumn label="备注信息">
        <textarea
          v-model="beforeOrderStore.remark"
          class="box-border h-180rpx w-full rounded-20rpx bg-#F3F3F3 p-30rpx text-28rpx text-#333333 leading-40rpx"
          placeholder="请输入您的备注信息..."
          placeholder-class="text-#999999"
        />
      </ListCellColumn>
    </view>
    <Spacer height="240" />
  </view>

  <view class="fixed bottom-24rpx z-20 x-center">
    <RGButton @tap="handleSubmit">
      一键捎件
    </RGButton>
  </view>
</template>

<route lang="yaml">
name: 'delivery'
style:
  navigationBarTitleText: '一键捎件'
  navigationBarBackgroundColor: '#E6F0FF'
  navigationBarTextStyle: 'black'
</route>
